var aA = document.querySelectorAll(".nav>li>a");
var aUl = document.querySelectorAll(".min-nav");
// 左边的下拉菜单

for (var i = 0; i < aA.length; i++) {
  aA[i].onclick = function () {
    var oUl = this.nextElementSibling;
    if (getComputedStyle(oUl).height == "0px") {
      for (var j = 0; j < aUl.length; j++) {
        aUl[j].style.height = "0px";
        aA[j].className = "";
      }
      oUl.style.height =
        oUl.children[0].scrollHeight * oUl.children.length + "px";
      this.className = "active";
    } else {
      oUl.style.height = "0px";
    }
  };
}
// 顶部导航栏隐藏
var oLeft = document.querySelector(".main-box>.left");
var oRight = document.querySelector(".main-box>.right");
var oMenu = document.querySelector(".header-left");
oMenu.addEventListener("click", hideDisplayFn);
var flag = true;
function hideDisplayFn() {
  if (flag) {
    oLeft.style.display = "none";
    oRight.style.width = "100%";
    flag = false;
  } else {
    oLeft.style.display = "block";
    oRight.style.width = "calc(100% - 256px)";
    flag = true;
  }
}

//表格数据渲染
//页面中所有的数据
var data = [
  {
    id: 1,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG001",
    total: "HH001",
    used: "5",
    released: "34",
    state: "可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 2,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG002",
    total: "HH002",
    used: "5",
    released: "23",
    state: "不可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 3,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG003",
    total: "HH003",
    used: "5",
    released: "32",
    state: "可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 4,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG004",
    total: "HH004",
    used: "5",
    released: "23",
    state: "不可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 5,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG005",
    total: "HH005",
    used: "5",
    released: "22",
    state: "可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 6,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG006",
    total: "HH006",
    used: "5",
    released: "11",
    state: "不可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 7,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG007",
    total: "HH007",
    used: "5",
    released: "54",
    state: "可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 8,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG008",
    total: "HH008",
    used: "5",
    released: "17",
    state: "不可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 9,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG009",
    total: "HH009",
    used: "5",
    released: "35",
    state: "可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 10,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG010",
    total: "HH010",
    used: "5",
    released: "23",
    state: "可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
  {
    id: 11,
    warehouse: "CK001",
    name: "KJ001",
    Layer: "CG011",
    total: "HH011",
    used: "5",
    released: "25",
    state: "可用",
    founder: "Admin",
    time: "2022-8-23 14:54:27",
  },
];
//当前的页码
var page = 1;
//每页的条数
var count = 8;
//获取tbody
var oTBody = document.querySelector("tbody");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页的按钮
var oPrevBtn = document.querySelector(".prev");
//获取下一页的按钮
var oNextBtn = document.querySelector(".next");

//获取搜索的输入框
var oSearchInp = document.querySelector(".LayerInformationValue");
//获取搜索按钮
var oSearchBtn = document.querySelector("#search");

//获取添加的保存按钮
var oAdd = document.querySelector("#add");
var oAddSaveBtn = document.querySelector(".addSaveBtn");
//获取修改的保存
var oEditSaveBtn = document.querySelector(".editSaveBtn");
//获取重置按钮
var oResetBtn = document.querySelector("#reset");
//查看详细
var oDetail = document.querySelector(".detail");

//获取库房状态
var oSearchStateInp = document.querySelector("#dropdownMenu1");

//页面初始化的渲染功能
function render() {
  //查看搜索框的内容
  var str1 = oSearchInp.value.trim(); //搜索编号的内容
  var str2 = oSearchStateInp.innerText.trim(); //搜索状态的内容

  var searchData = []; //最终用来渲染的;
  var data1 = [];

  if (str1 == "") {
    data1 = data;
  } else
    data1 = data.filter(function (v) {
      return v.total.includes(str1);
    });

  if (str2 == "全部") {
    searchData = data1;
  } else {
    searchData = data1.filter(function (v) {
      return v.state.startsWith(str2);
    });
  }
  //查看搜索框的内容
  /*   var str = oSearchInp.value; //搜索的内容
  var searchData = data; //搜索后的数据
  if (str == "") {
    //没有搜索内容，全部都要
    searchData = data; //搜索的就是全部
  } else {
    //有搜索的内容
    for (var i = 0; i < data.length; i++) {
      //如果每条数据中的名字里面包含搜索的内容
      if (data[i].name.includes(str)) {
        //就把符合条件的内容放进渲染的数据中
        searchData.push(data[i]);
      }
    }
  } */
  /*   var searchData;
  if (str== "") {
    searchData = data;
  } else {
    searchData = data.filter(function (v, i) {
      if (v.name.includes(str)) {
        //就把符合条件的内容放进渲染的数据中
        return v;
      }
    });
  } */
  //让table为空
  oTBody.innerHTML = "";
  //根据count和page准备要渲染的数据
  var renderArr = searchData.slice((page - 1) * count, page * count);
  //循环要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
    //创建tr
    var oTr = document.createElement("tr");
    //给tr创建内容
    if (renderArr[i].state == "可用") {
      oTr.innerHTML = `
        <td>${renderArr[i].id}</td>
        <td>${renderArr[i].warehouse}</td>
        <td>${renderArr[i].name}</td>
        <td>${renderArr[i].Layer}</td>
        <td>${renderArr[i].total}</td>
        <td>${renderArr[i].used}</td>
        <td>${renderArr[i].released}</td>
        <td>
        <div class="switch-box true">
        <div class="switch"></div>
        </div>
        </td>
        <td>${renderArr[i].founder}</td>
        <td>${renderArr[i].time}</td>
          <td>
          <a class="detail" >
  查看
</a>
        <a type="button" class="edit" data-toggle="modal" data-target="#myModal">
  编辑
</a> 
          <a class="del">删除</a>
      </td>
    `;
    } else {
      oTr.innerHTML = `
        <td>${renderArr[i].id}</td>
        <td>${renderArr[i].warehouse}</td>
        <td>${renderArr[i].name}</td>
        <td>${renderArr[i].Layer}</td>
        <td>${renderArr[i].total}</td>
        <td>${renderArr[i].used}</td>
        <td>${renderArr[i].released}</td>
       <td>
       <div class="switch-box false">
        <div class="switch"></div>
        </div>
                </td>
        </td>
        <td>${renderArr[i].founder}</td>
        <td>${renderArr[i].time}</td>
          <td>
          <a class="detail" >
  查看
</a>
        <a type="button" class="edit" data-toggle="modal" data-target="#myModal">
  编辑
</a> 
          <a class="del">删除</a>
      </td>
    `;
    }

    //把tr创建到tbody里面
    oTBody.appendChild(oTr);
  }

  //渲染页码
  //找到所有的1，2，3，4的页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  //删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  //根据数据的长度重新创建页码
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    //如果li和当前的页码一致，给他加一个选中的class
    if (i == page) {
      oLi.classList.add("active");
    }
    //在下一页的前面插入页码
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
render();
//一上来就渲染一次数据
render();
//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  //如果当前点击的按钮有pageBtn这个class名字
  if (event.target.className == "pageBtn") {
    //修改全局的page
    page = event.target.innerText;
    //渲染table，渲染分页
    render();
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
    page++;
    render();
  }
}

//库房状态
var oDropdown = document.querySelector(".dropdown");
oDropdown.addEventListener("click", changeFn);
function changeFn() {
  // console.log(event.target)
  if (event.target.className == "on") {
    oDropdown.children[0].innerHTML = '可用<span class="caret"></span>';
  } else if (event.target.className == "off") {
    oDropdown.children[0].innerHTML = '不可用<span class="caret"></span>';
  } else {
    oDropdown.children[0].innerHTML = '全部<span class="caret"></span>';
  }
}

//删除功能
oTBody.addEventListener("click", del);
function del() {
  if (event.target.className.includes("del")) {
    //找到id
    var id = event.target.parentNode.parentNode.children[0].innerText;
    //循环数据对比
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        //删除id所对应的数据
        data.splice(i, 1);
      }
    }
    //重新渲染
    render();
  }
}

//查看
oTBody.addEventListener("click", openDetail);
function openDetail() {
  //判断事件源
  if (event.target.className.includes("detail")) {
    //让编辑框显示
    $("#detailModal").modal("show");
    //确认是那个id的数据
    var id = event.target.parentNode.parentNode.children[0].innerText;
    //循环数据，找到对应id的，给编辑框赋值
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        document.querySelector(".detailId").value = data[i].id;
        document.querySelector(".detailWarehouse").value = data[i].warehouse;
        document.querySelector(".detailName").value = data[i].name;
        document.querySelector(".detailLayer").value = data[i].Layer;
        document.querySelector(".detailTotal").value = data[i].total;
        document.querySelector(".detailUsed").value = data[i].used;
        document.querySelector(".detailReleased").value = data[i].released;
        document.querySelector(".detailFounder").value = data[i].founder;
        document.querySelector(".detailTime").value = data[i].time;
      }
    }
  }
}

//重置
oResetBtn.addEventListener("click", resetFn);
function resetFn() {
  $("#resetModal").modal("show");
}
var sure = document.querySelector(".resetS");
sure.addEventListener("click", resetS);
function resetS() {
  oSearchInp.value = "";
  location.reload();
  $("#resetModal").modal("hide");
}

//修改
oTBody.addEventListener("click", edit);
function edit() {
  //判断事件源
  if (event.target.className.includes("edit")) {
    //让编辑框显示
    $("#editModal").modal("show");
    var id = event.target.parentNode.parentNode.children[0].innerText;
    //确认是那个id的数据
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        document.querySelector(".editId").value = data[i].id;
        document.querySelector(".editwarehouse").value = data[i].warehouse;
        document.querySelector(".editName").value = data[i].name;
        document.querySelector(".editLayer").value = data[i].Layer;
        document.querySelector(".editTotal").value = data[i].total;
        document.querySelector(".editUsed").value = data[i].used;
        document.querySelector(".editReleased").value = data[i].released;
        document.querySelector(".editFounder").value = data[i].founder;
        document.querySelector(".editTime").value = data[i].time;
      }
    }
  }
}
oEditSaveBtn.addEventListener("click", editSave);
function editSave() {
  //看替换的是哪一条；
  var id = document.querySelector(".editId").value;
  //循环数据，找到对应的，更改
  for (var i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      data[i].warehouse = document.querySelector(".editwarehouse").value;
      data[i].name = document.querySelector(".editName").value;
      data[i].Layer = document.querySelector(".editLayer").value;
      data[i].total = document.querySelector(".editTotal").value;
      data[i].used = document.querySelector(".editUsed").value;
      data[i].released = document.querySelector(".editReleased").value;
      data[i].founder = document.querySelector(".editFounder").value;
      data[i].time = document.querySelector(".editTime").value;
    }
  }
  //关闭弹框
  $("#editModal").modal("hide");
  //重新渲染
  render();
}

// 添加
//添加的时候
oAdd.addEventListener("click", addFn);
oAddSaveBtn.addEventListener("click", saveFn);

function addFn() {
  $("#addModal").modal("show");
}

function saveFn() {
  var addId = document.querySelector(".addId");
  var addwarehouse = document.querySelector(".addWarehouse");
  var addName = document.querySelector(".addName");
  var addLayer = document.querySelector(".addLayer");
  var addTotal = document.querySelector(".addTotal");
  var addUsed = document.querySelector(".addUsed");
  var addReleased = document.querySelector(".addReleased");
  var addFounder = document.querySelector(".addFounder");
  var addTime = document.querySelector(".addTime");

  data.push({
    id: addId.value,
    warehouse: addwarehouse.value,
    name: addName.value,
    Layer: addLayer.value,
    total: addTotal.value,
    used: addUsed.value,
    released: addReleased.value,
    founder: addFounder.value,
    time: addTime.value,
  });
  addId.value = "";
  addwarehouse.value = "";
  addName.value = "";
  addLayer.value = "";
  addTotal.value = "";
  addUsed.value = "";
  addReleased.value = "";
  addFounder.value = "";
  addTime.value = "";
}
// 修改状态
oTBody.addEventListener("click", changeState);
function changeState() {
  //判断事件源
  if (event.target.className == "switch") {
    //确认是那个id的数据
    var id =
      event.target.parentNode.parentNode.parentNode.children[0].innerText;

    if (event.target.parentNode.className.includes("true")) {
      event.target.parentNode.classList.remove("true");
      event.target.parentNode.classList.add("false");

      for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          data[i].state = "不可用";
        }
      }
    } else {
      event.target.parentNode.classList.remove("false");
      event.target.parentNode.classList.add("true");

      for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          data[i].state = "不可用";
        }
      }
    }
  }
}
//查询
oSearchBtn.addEventListener("click", searchFn);
function searchFn() {
  page = 1;
  render();
}
